<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--新增测试用例弹出modal-->
<div th:fragment="testcase_add_modal" class="modal fade" id="testcase_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="testcase_label_a"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="testcase_label_a">新增测试用例</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="bs-component">
                        <!--tab组-->
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#testcaseBaseInfo">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a id="testcase_tab_a" class="nav-link" data-toggle="tab"
                                   href="#testcaseProfile">测试用例</a>
                            </li>

                        </ul>

                        <!--tab body-->
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade active show" id="testcaseBaseInfo">
                                <br>
                                <form id="testcase_base_info_form_a" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">用例名称</label>
                                        <div class="col-sm-12">
                                            <input id="testcaseName_a" name="testcaseName" type="text"
                                                   class="form-control"
                                                   placeholder="">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">测试集合</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="belongTestSuit_a" class="form-control"
                                                        name="testSuitId">
                                                </select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">测试接口</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="testcase_interface_a" name="interfaceId"
                                                        class="selectpicker" data-live-search="true"></select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="testcase_desc_a" class="col-sm-3 control-label">描述</label>
                                        <div class="col-sm-10">
                                            <input id="testcase_desc_a" name="description" type="text"
                                                   class="form-control" placeholder="">
                                        </div>
                                    </div>

                                </form>
                            </div>

                            <div class="tab-pane fade" id="testcaseProfile">
                                <br>
                                <div class="alert alert-info alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <strong>提示!&nbsp</strong> <a href="https://cn.httprunner.org/"
                                                                 class="alert-link"><strong>HttpRunner</strong></a>
                                    是一款面向 HTTP(S) 协议的通用测试框架，只需编写维护一份 YAML/JSON 脚本，即可实现自动化测试、性能测试、线上监控、持续集成等多种测试需求。
                                    你可以从本地磁盘加载<code>json</code>文件,或者在下面直接编写json格式的文件。
                                </div>

                                <div class="row">
                                    <div class="col-md-9 col-lg-9">
                                        <input id="loadJsonDocument" type="file" class="filestyle"
                                               data-buttonName="btn-primary">
                                    </div>
                                    <div class="col-md-6 col-lg-3">
                                        <button id="uploadFile" type="button" class="btn btn-primary"
                                                onclick="uploadJsonFile()">上传
                                        </button>
                                    </div>
                                </div>
                                <br>
                                <div id="testcaseJsonEditor_a" style="height: 500px;"></div>
                            </div>

                            <div class="tab-pane fade" id="expectResult">
                                <br>
                                <div id="testcaseJsonEditor_expect_a"></div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addTestCaseBtn" type="button" class="btn btn-primary" onclick="addTestCase()">保存</button>
            </div>
        </div>
    </div>

</div>

<div th:fragment="common_testcase_add_modal" class="modal fade" id="common_testcase_add_modal" tabindex="-1"
     role="dialog"
     aria-labelledby="testcase_label_c"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="testcase_label_c">新增公共测试用例</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="bs-component">
                        <!--tab组-->
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#testcaseBaseInfo_c">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a id="testcase_tab_c" class="nav-link" data-toggle="tab"
                                   href="#testcaseProfile_c">测试用例</a>
                            </li>

                        </ul>

                        <!--tab body-->
                        <div class="tab-content">
                            <div class="tab-pane fade active show" id="testcaseBaseInfo_c">
                                <br>
                                <form id="testcase_base_info_form_c" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">用例名称</label>
                                        <div class="col-sm-12">
                                            <input id="testcaseName_c" name="testcaseName" type="text"
                                                   class="form-control"
                                                   placeholder="">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">测试接口</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="testcase_interface_c" name="interfaceId"
                                                        class="selectpicker" data-live-search="true"></select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="testcase_desc_a" class="col-sm-3 control-label">描述</label>
                                        <div class="col-sm-10">
                                            <input id="testcase_desc_c" name="description" type="text"
                                                   class="form-control" placeholder="">
                                        </div>
                                    </div>

                                </form>
                            </div>

                            <div class="tab-pane fade" id="testcaseProfile_c">
                                <br>
                                <div class="alert alert-info alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <strong>提示!&nbsp</strong> <a href="https://cn.httprunner.org/"
                                                                 class="alert-link"><strong>HttpRunner</strong></a>
                                    是一款面向 HTTP(S) 协议的通用测试框架，只需编写维护一份 YAML/JSON 脚本，即可实现自动化测试、性能测试、线上监控、持续集成等多种测试需求。
                                    你可以从本地磁盘加载<code>json</code>文件,或者在下面直接编写json格式的文件。
                                </div>

                                <div class="row">
                                    <div class="col-md-9 col-lg-9">
                                        <input id="loadJsonDocument_c" type="file" class="filestyle"
                                               data-buttonName="btn-primary">
                                    </div>
                                    <div class="col-md-6 col-lg-3">
                                        <button id="uploadFile_c" type="button" class="btn btn-primary"
                                                onclick="uploadJsonFile()">上传
                                        </button>
                                    </div>
                                </div>
                                <br>
                                <div id="testcaseJsonEditor_c" style="height: 500px;"></div>
                            </div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addTestCaseBtn_c" type="button" class="btn btn-primary" onclick="addTestCase()">保存</button>
            </div>
        </div>
    </div>

</div>


<!--修改测试用例弹出modal-->
<div th:fragment="testcase_update_modal" class="modal fade" id="testcase_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="testcase_label_a"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="testcase_label_u">更新测试用例</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="bs-component">
                        <!--tab组-->
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#testcaseBaseInfo_u">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a id="testcase_tab_u" class="nav-link" data-toggle="tab"
                                   href="#testcaseProfile_u">测试用例</a>
                            </li>
                        </ul>

                        <!--tab body-->
                        <div class="tab-content" id="myTabContent_u">
                            <div class="tab-pane fade active show" id="testcaseBaseInfo_u">
                                <br>
                                <form id="testcase_base_info_form_u" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">用例编号</label>
                                        <div class="col-sm-12">
                                            <input id="testcaseId_u" name="testcaseId" type="text"
                                                   class="form-control" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">用例名称</label>
                                        <div class="col-sm-12">
                                            <input id="testcaseName_u" name="testcaseName" type="text"
                                                   class="form-control"
                                                   placeholder="">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">测试集合</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="belongTestSuit_u" class="form-control"
                                                        name="testSuitId">
                                                </select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">测试接口</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="testcase_interface_u" name="interfaceId"
                                                        class="selectpicker" data-live-search="true"></select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="testcase_desc_u" class="col-sm-3 control-label">描述</label>
                                        <div class="col-sm-10">
                                            <input id="testcase_desc_u" name="description" type="text"
                                                   class="form-control" placeholder="">
                                        </div>
                                    </div>

                                </form>
                            </div>

                            <div class="tab-pane fade" id="testcaseProfile_u">
                                <br>
                                <div class="alert alert-info alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <strong>提示!&nbsp</strong> <a href="https://cn.httprunner.org/"
                                                                 class="alert-link"><strong>HttpRunner</strong></a>
                                    是一款面向 HTTP(S) 协议的通用测试框架，只需编写维护一份 YAML/JSON 脚本，即可实现自动化测试、性能测试、线上监控、持续集成等多种测试需求。
                                    你可以从本地磁盘加载<code>json</code>文件,或者在下面直接编写json格式的文件。
                                </div>

                                <div class="row">
                                    <div class="col-md-9 col-lg-9">
                                        <input id="loadJsonDocument_u" type="file" class="filestyle"
                                               data-buttonName="btn-primary">
                                    </div>
                                    <div class="col-md-6 col-lg-3">
                                        <button id="uploadFile_u" type="button" class="btn btn-primary">上传
                                        </button>
                                    </div>
                                </div>
                                <br>
                                <div id="testcaseJsonEditor_u" style="height: 500px;"></div>
                            </div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="updateTestCaseBtn" type="button" class="btn btn-primary" onclick="updateTestCase()">保存
                </button>
            </div>
        </div>
    </div>

</div>

<div th:fragment="json_data_modal" class="modal fade" id="json_data_modal" tabindex="-1" role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">JSON格式测试脚本</h3>
            </div>
            <div class="modal-body">
                <div id="json_data_view_area" style="height: 500px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>关闭
                </button>
            </div>
        </div>
    </div>

</div>


</html>